<template>
   <div>
    <router-link :to="{name:'login'}">登录</router-link>
    |<router-link to="/home">首页</router-link>
   </div>
   <div>
    <button @click="login">login</button>
    <button @click="home">home</button>
   </div>
   <hr>
   <router-view v-slot:default="{route,Component}">
    <transition :enter-active-class="`animate__animated ${route.meta.translate}`">
      <component :is="Component"></component>
    </transition>
   </router-view>
</template>

<script lang='ts' setup>
import { useRouter} from 'vue-router';
import 'animate.css'

const router = useRouter()
const login=()=>{
  router.push({
    // path:'/',
    name:'login'
  })
}
const home=()=>{
  router.push('/home')
}
</script>

<style scoped>

</style> 